<template>
   <div class="container">
       <!-- 面包屑导航组件-->
      <breadcrumb :detail="detail"></breadcrumb>
      <!-- 详情页数据组件-->
      <detail-data :detail="detail" :date="date" :id="id"></detail-data>
      <!-- 文本介绍-->
      <div class="d-flex">
          <div class="text-message">
            <div class="nav">
                <ul @click="move">
                    <li v-for="(item,i) of arr" :key="i"  :data-i="i" :class="{li_active:li_active==i}">{{arr[i]}}</li>
                </ul>
            </div>
            <div v-html="detail.feature"></div>
            <div v-html="detail.scheduling"></div>
            <div v-html="detail.cost"></div>
            <div v-html="detail.attention"></div>
          </div>
           <!-- 跳转到其他详情页-->
          <div class="hot">
            <h3>热门推荐</h3>
            <div v-for="item of searchResult" :key="item.id" @click="load">
              <router-link :to="`/detail/${item.id}/${item.date}`" >
                <div>
                    <img :src="item.image" alt="">
                </div>            
              </router-link>
              <div>
                <p>{{item.title}}</p>
                <p class="money"><span>￥</span>{{item.price}} <span>起</span></p>
              </div>               
            </div>
          </div>
      </div>
      <!--提示模块组件-->
    <hint-model @tick="tick"></hint-model>
   </div>
</template>
<script>
import Breadcrumb from '../components/Breadcrumb.vue';
import DetailData from '../components/DetailData.vue';
import HintModel from '../components/HintModel.vue';
import {detailDate,searchDate} from '../assets/js/apis/getDetail.js' //封住了详情信息请求和搜索请求
export default {
  components: { Breadcrumb, DetailData, HintModel, },
    props:["id",'date'],
    data() {
        return {
            detail:{image:'detail_dulong.jpg',},
            li_active:0,
            arr:["线路特色","行程安排","费用说明","注意事项"],
            searchResult:[{price:0}],
        }
    },
    mounted() {
        // this.getDetail(this.getSearch);
        detailDate(this.id,searchDate).then(result=>{
           this.detail=result.result;
         //地图控件
            let map=new BMap.Map("mapContainer");
            var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
            });
            local.search(this.detail.keyword);            
            let scaleContrl=new BMap.ScaleControl();
            let navc=new BMap.NavigationControl();
            map.addControl(scaleContrl);
            map.addControl(navc);
            map.enableScrollWheelZoom(true); 
           //搜索请求(关键字查询)及数据
        searchDate(this.detail.localtion).then(result=>{
            result.results.forEach(item=>{
            item.image=require(`../assets/house/${item.image}`)
        })
        this.searchResult=result.results;  
        });
        })  
        document.documentElement.scrollTop=0;
    },
    methods:{
        //页面内非锚点跳转
        move(e){
            if(e.target.tagName=="LI")
            {
                if(e.target.innerHTML=="线路特色"){
                    document.getElementById("features").scrollIntoView();
                }else if(e.target.innerHTML=="行程安排"){
                    document.getElementById("jieshao").scrollIntoView();
                }else if(e.target.innerHTML=="费用说明"){
                    document.getElementById("feeinclude").scrollIntoView();
                }else{
                    document.getElementById("payment").scrollIntoView();
                } 
                this.li_active=e.target.dataset.i;        
        }
    },
    //跳转时刷新页面
        load(){
            location.reload();
            document.documentElement.scrollTop=0;
        },
        tick(i){//获得子组件传来的参数，根据参数修改变量
            this.li_active=i;
        }
    }
}
</script>
<style scoped>
.container{
    background-color: #f0f2f5;  
}
.d-flex{display: flex;width: 1200px;margin: 0 auto;padding:0 0 0 20px;}
.text-message{padding: 20px;width: 900px; margin:10px 0 0 -20px;background-color: #fff;}

.nav{
    position: sticky;
    top: 0px;
}
.nav>ul{
    list-style: none;
    display: flex; 
    background-color: white;
    box-shadow: 1px 0 1px  #ccc; 
    padding: 0;
}
.li_active{background-image: linear-gradient(to top,#0A5802,#579C0E);color: white;}
.nav>ul li{
   border-radius: 1px;
   padding: 10px;
   cursor: pointer;
}
.text-message /deep/ a{text-decoration: none;color: black;}
.text-message /deep/.line-feature__title {
    position: relative;
    height: 40px;
    padding: 0 24px 0 28px;
    margin: 10px 0 20px 0;
    line-height: 38px;
    font-size: 16px;
    font-weight: bold;
    color: #323232;
    background-color: #f7f7f7;
    border: 1px solid #eee;
}
.text-message /deep/.mt-40 p{
    font-size: 14px;
    line-height: 24px;

}
.text-message /deep/ img{
    width: 100%;
}
.text-message /deep/.line-feature__title.clearfix:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 24px;
    vertical-align: middle;
    margin: 0 10px 0 -10px;
    background-color: #31c27c;
}
.text-message /deep/ .title-order{
    width: 50px;height: 50px;
    border-radius:5px ;
    background-image: linear-gradient(to top,#0A5802,#579C0E);
    padding: 10px;
    margin-right:10px ;
}
.text-message /deep/ .item-div{margin:20px 60px;font-size: 14px;color: #444;}
.hot{
    width: 240px;
    background-color: white;
    margin: 10px 0 0 10px;
    padding: 20px;
}
.hot h3{margin-bottom: 10px;}
.hot img{border-radius: 5px;}
.hot p{margin: 5px 0 5px 0;} 
.hot>div{transition: 0.4s;margin-bottom: 10px;}
.hot>div:hover{transform:scale(1.05);box-shadow:0 0 0 0  #ccc;}
.money{color: orange;font-size: 24px;}
.money span{font-size: 20px;}

</style>